<template>
  <el-scrollbar>
  <el-container class="app" v-if="al">
    <el-timeline >
      <el-timeline-item v-for="article in articles" :timestamp="article.createTime" placement="top">
        <el-card>
          <h4 style="font-size: larger;margin-bottom: 10px">{{article.articleTitle}}</h4>
          <p style="margin-bottom: 10px">更新时间：{{article.updateTime}}</p>
          <el-link type="warning" @click="myarticle = article,bl=true">修改文章</el-link>
          <el-popconfirm
              confirm-button-text="删除"
              cancel-button-text="取消"
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="确定要删除吗？"
              @confirm="deleteArticle(article.id)"
              @cancel="cancelEvent"
          >
            <template #reference>
              <el-link type="error" >删除</el-link>
            </template>
          </el-popconfirm>
<!--          <el-link type="error" @click="deleteArticle(article.id)">删除文章</el-link>-->
          <router-link :to = article.originalUrl>
            <el-link type="primary">跳转至详情页</el-link>
          </router-link>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <el-dialog v-model="bl" @close="bl=false">
      <UA v-if="bl" :title="myarticle.id"></UA>
    </el-dialog>
  </el-container>
    <el-container v-else>
      你还没有文章
      <router-link :to="{path:'/article'}">
        <el-link type="primary">
          点击开启你的文章之旅
        </el-link>
      </router-link>
    </el-container>
  </el-scrollbar>
</template>

<script setup>
import request from "@/utils/request";
import {ref,onMounted,inject} from "vue-demi";
import UA from "@/components/personal/UpdateArticle.vue"
import {ElMessage} from "element-plus";
import {InfoFilled} from "@element-plus/icons-vue/global";

const reload = inject("reload")
const al = ref(true)
const bl = ref(false)
const myarticle = ref({})
const articles = ref([])
const user = ref()
onMounted(async ()=>{
  let result = await request.get("user/getuser")
  let data = result.data
  if(data.code === 200 ){
    user.value = data.data
    console.log(data.msg)
  }else{
    console.log(data.msg)
  }

  await getMyArticles()

})
const getMyArticles = async ()=>{
  let result1 = await request.get("myarticles?id="+user.value.id)
  let data1 = result1.data
  if(data1.code === 200){
    articles.value = data1.data
    console.log(data1.msg)
  }else{
    al.value = false
    console.log(data1.msg)
  }
}
const deleteArticle = async (id)=>{
  let result = await  request.get("deletemyarticle?id="+id)
  let data = result.data
  if(data.code === 200){
    open(data.msg,"success")
    await getMyArticles()
  }else {
    open(data.msg,"error")
  }
}
const open = (msg,type)=>{
  ElMessage({
    message :　msg,
  　type : type
  })
}
const cancelEvent = () => {
  open("取消成功","success")
}
</script>

<style scoped>


.app{
  position: relative;
  top: 50px;
  left: 500px;
  height: 650px;
  width: 50%;
}
el-scrollbar{
  height: 100%;
}
el-scrollbar__wrap {
  overflow-x: hidden;
}

</style>